<template>
  <div>
    <a href="javascript:;" class="upload" @click="addFile"></a>
    <el-dialog title="上传" :visible.sync="showUpload" :hideClose="true" @onClose="onClose">
      <div class="file-upload-box">
        <wrapUploader 
          @info="info" 
          @succeedOver="succeedOver" 
          @mergeMature="mergeMature"
          :type="type" 
          :taskId="path" 
          :biz_id="bizId" 
          :relative_path="relative_path"
          :succeed="uploadSucceed" 
          v-if="showUpload">
        </wrapUploader>
      </div>
      <span slot="footer" class="dialog-footer">
        <span id="dialog-footer-hint">！关闭弹框后会导致剩余数据传输失败</span>
        <el-button @click="onClose" class="none-type">结束传输</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "FileList",
  data () {
    return {
      showUpload: false,
      path: '',
      infoData: {}
    };
  },
  watch: {
    taskId(val) {
      console.log(val)
      this.path = val
    }
  },
  props: ['showAdd', 'type', 'taskId', 'bizId', 'uploadSucceed', 'relative_path'],
  async created () {
    this.path = this.taskId
    if (this.showAdd) {
      console.log(this.showAdd);
      this.addFile();
    }
  },
  methods: {
    onClose() {
      this.showUpload = false
      this.$emit('info', this.infoData)
      this.$emit('succeedOver', this.infoData)
    },

    addFile () {
      this.showUpload = true;
    },

    info (data) {
      this.infoData = data
    },

    succeedOver (data) {
      this.succeedOverData = data
    },

    mergeMature (data) {
      console.log(data)
    }
  },
};
</script>

<style scoped>
.dialog-footer{
  position: relative;
  display: block;
  width: 100%;
}
#dialog-footer-hint{
  position: absolute;
  left: 0;
  top: 0;
}
.upload{
    background: url(~@/assets/img/icon-upload.png) no-repeat;
    width: 16px;
    height: 16px;
    float: left;
    background-size: 16px 16px;
  }
</style>
